<template>
  <div class="ed-form-field-factory">
    <el-tag
      v-for="tag in fields"
      :key="tag.name"
      closable
      @close="drop(tag)"
      :type="tag.type"
    >
      {{ tag.label }}
    </el-tag>
    <el-divider />
    <el-form
      ref="factory"
      :inline="true"
      :model="value"
      label-width="80px"
    >
      <ed-form-fields
        :fields="elements"
        :value="value"
        @change="change"
      />
      <el-form-item class="submit">
        <el-button @click="add">
          添加
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { FieldFactory } from '../../store/Form'

export default {
  beforeCreate: function () {
    this.$options.components.EdFormFields = require('./EdFormFields.vue').default
  },
  data () {
    return {
      elements: FieldFactory.fields,
      value: {}
    }
  },
  props: {
    fields: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    change (value) {
      this.value = value
    },
    add () {
      this.$refs['factory'].validate((valid) => {
        if (valid) {
          this.$emit('add', this.value)
          this.value = {}
        } else {
          return false
        }
      })
    },
    drop (field) {
      this.$emit('drop', field)
    }
  }
}
</script>

<style scoped>
.submit {
  padding-top: 20px;
}
.el-tag+.el-tag {
  margin-left:10px
}

.ed-form-field-factory /deep/ .el-form--inline .form-inner-item  {
  width: 300px;
}
</style>
